﻿@using RuoVea.OmiSystem.Attributes
@using RuoVea.OmiSystem.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiSystem.Language.i18n.role_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style> .el-button [class*="el-icon-"] + span {margin-left: 1px !important;}.menu-data-tree {width: 100%;border: 1px solid var(--el-border-color);border-radius: var(--el-input-border-radius, var(--el-border-radius-base));padding: 5px;} .menuTree .el-tree-node__children {padding-left: 40px;white-space: pre-wrap;line-height: 100%;} .menuTree .el-tree-node__children .el-tree-node .el-tree-node {display: inline-block;} .menuTree .el-tree-node__children .el-tree-node__content {padding-left: 0px !important;} .menuTree .el-dialog .el-dialog__body {padding: 1px 20px !important;} .menuTree .el-dialog .el-dialog__footer {padding: 1px 20px 20px !important;} </style>
</head>
<body>

    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad" :table-loading="loading">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
            <template slot-scope="{type,size,row,index}" slot="menu">
                <el-button icon="el-icon-user-solid" :size="size" :type="type" @@click="handleRoleUser(row,index)" v-if="option.roleUserBtn">{{i18n.t('user')}}</el-button>
                <el-button icon="el-icon-menu" :size="size" :type="type" @@click="handleRoleMenu(row,index)" v-if="option.grantMenuBtn">{{i18n.t('permissions')}}</el-button>
            </template>
        </avue-crud>

        <el-dialog :title="dialogtitle" :visible.sync="menuDialogVisible" width="580px" :before-close="beforeClose" class="menuTree">
            <avue-tree ref="menuTree" :option="menuOption" :data="menuData" class="menuTree" style="height:520px"></avue-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @@click="onMenuClose" size="mini">{{i18n.t('cancel')}}</el-button>
                <el-button type="primary" @@click="handleMenuSubmit" size="mini" v-bind:loading="btnLoading">{{i18n.t('confirm')}}</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="dialogtitle" ref="iframe" v-bind:visible.sync="subDialogVisible" dialogwidth="50%" dialogstyle="width:100%;height:360px;">
            <div style="text-align: center">
                <el-transfer style="text-align: left; display: inline-block" v-model="userValue" :data="userData" :button-texts="[`${this.i18n.t('revoke')}`, `${this.i18n.t('allocate')}`]" filterable
                             :titles="[`${this.i18n.t('unallocated_users')}`, `${this.i18n.t('allocated_users')}`]" v-on:change="handleChange"></el-transfer>
            </div>
        </el-dialog>
    </div>

    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>

    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "role",
                    pageUrl: "/role/pages",
                    addUrl: "/role/add",
                    editUrl: "/role/update",
                    deleteUrl: "/role/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`sysRole:page`),
                        refreshBtn: Permissions.avePermission(`sysRole:page`),

                        addBtn: Permissions.avePermission(`sysRole:addRole`),
                        editBtn: Permissions.avePermission(`sysRole:updateRole`),
                        delBtn: Permissions.avePermission(`sysRole:deleteRole`),
                        viewBtn: true,
                        grantMenuBtn: Permissions.avePermission(`sysRole:grantMenu`),
                        grantDataScopeBtn: Permissions.avePermission(`sysRole:grantDataScope`),
                        roleUserBtn: Permissions.avePermission(`sysRole:roleUser`),
                        setStatusBtn: Permissions.avePermission(`sysRole:setStatus`),

                        rowKey: 'id',
                        searchShow: false,
                        menuWidth: '350',
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "name", label: `${this.i18n.t('name')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "code", label: `${this.i18n.t('code')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", step: 100, value: 100, clearable: true },
                            { prop: "dataScope", label: `${this.i18n.t('data_scope')}`, search: false, row: true, hide: false, type: "select", value: 1, clearable: true, dicData: [{ label: `${this.i18n.t('all_data')}`, value: 1, }, { label: `${this.i18n.t('this_department_and_below_data')}`, value: 2, }, { label: `${this.i18n.t('this_department_data')}`, value: 3, }, { label: `${this.i18n.t('only_personal_data')}`, value: 4, }, { label: `${this.i18n.t('custom_data')}`, value: 5, },], rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], control: (val, form) => { if (val === 5) { return { orgIds: { display: true } }; } else { return { orgIds: { display: false } }; } }, },
                            {
                                label: `${this.i18n.t('organization')}`, prop: "orgIds", hide: true, showColumn: false, display: false,
                                multiple: true, defaultExpandAll: true,
                                type: "tree", props: { label: 'name', value: 'id', children: 'children' }, dicUrl: `${Vue.prototype.$baseURL}/organization/org`, showAllLevels: false, emitPath: false, checkStrictly: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140, },
                        ]
                    },
                    menuOption: {
                        defaultExpandAll: true,
                        menu: false,
                        addBtn: false,
                        filter: false,
                        multiple: true,
                        props: { labelText: `${this.i18n.t('title')}`, label: 'title', value: 'value', children: 'children' }
                    },

                    selectRoleId: 0,

                    subDialogVisible: false,
                    userData: [],
                    userValue: [],

                    dialogtitle: `${this.i18n.t('user_role')}`,
                    menuDialogVisible: false,
                    menuData: [],
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 3) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                treeNodeClass(node) {
                    let addClass = true;
                    if (node.children && node.children.length > 0) {
                        for (let key of Object.keys(node.children)) {
                            if (node.children[key].children && node.children[key].children.length > 0) {
                                addClass = false;
                                break;
                            }
                        }
                    }
                    return addClass ? 'penultimate-node' : '';
                },
                LoadRoleMenuData(id) {
                    this.menuValue = [];
                    this.$http.get("/menu/rolemenuidlist/" + id, { async: false }).then((res) => {
                        this.$refs.menuTree.setCheckedKeys(res)
                    }).catch(e => {
                        console.log(e);
                    });
                },
                LoadMenuData(id) {
                    this.$http.get("/menu/TreeForGrant/" + id, { async: false }).then((res) => {
                        this.menuData = res;
                    }).catch(e => {
                        console.log(e);
                    });
                },
                handleRoleMenu(row) {
                    this.selectRoleId = 0;
                    this.dialogtitle = `${this.i18n.t('role')}:[${row.name}]${this.i18n.t('assign_permissions')}`;
                    this.menuDialogVisible = true;
                    this.selectRoleId = row.id;
                    this.LoadMenuData(row.id);
                    this.LoadRoleMenuData(row.id);
                },
                handleMenuSubmit() {
                    this.$confirm(`${this.i18n.t('confirm_save_permission_changes')}`, this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'error', customClass: "elmessagebox" })
                        .then(() => {
                            this.btnLoading = true;
                            // 获取选中的节点和半选状态下父级节点的id
                            const checkedKeys = this.$refs.menuTree.getCheckedKeys();
                            // const halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();
                            // const allSelectedKeys = checkedKeys.concat(halfCheckedKeys);
                            let data = { Id: this.selectRoleId, MenuIdList: checkedKeys };
                            this.$http.post("/menu/grantmenu", data)
                                .then((res) => {
                                    if (res == true) {
                                        this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                        setTimeout(() => { this.menuDialogVisible = false; }, 1000);
                                    } else {
                                        this.btnLoading = false;
                                    }
                                });
                        }).catch(_ => { this.btnLoading = false; console.info(_); });
                },
                onClose() {
                    this.subDialogVisible = false;
                },
                onMenuClose() {
                    this.menuDialogVisible = false;
                },
                beforeClose(done) {
                    this.$confirm(Vue.prototype.i18n.t('aresureclose')).then(_ => {
                        done();
                        this.$emit("close");
                    }).catch(_ => { });
                },

                handleRoleUser(row) {
                    this.selectRoleId = 0;
                    this.dialogtitle = `${this.i18n.t('role')}:[${row.name}]${this.i18n.t('assign_user')}`;
                    this.subDialogVisible = true;
                    this.selectRoleId = row.id;
                    this.LoadUserData(row.id);
                    this.LoadRoleUserData(row.id);
                },
                LoadUserData(id) {
                    this.userData = [];
                    this.$http.get("/user/getsysuserlist", { async: false }).then((res) => {
                        res.forEach(item => { this.userData.push({ label: item.realName, key: item.id }); });
                    }).catch(e => { console.log(e); });
                },
                LoadRoleUserData(id) {
                    this.userValue = [];
                    this.$http.get("/user/roleuserlistbyroleid/" + id, { async: false }).then((res) => {
                        res.forEach(item => {
                            this.userValue.push(item.id);
                        });
                    }).catch(e => {
                        console.log(e);
                    });
                },
                handleChange(value, direction, movedKeys) {
                    let data = { RoleId: this.selectRoleId, UserIdList: movedKeys };

                    if (direction == 'right') {
                        this.$http.post("/role/grantroleusers", data).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            }
                        });
                    }
                    else {
                        this.$http.post("/role/removeroleusers", data).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            }
                        });
                    }
                }
            }
        });


    </script>
</body>
</html>